import React, { Component } from 'react';
import './aside.scss'
import { category_list, category_subcate } from '../utils/api'
import { withRouter } from 'react-router-dom'
class aside extends Component {
    constructor(props) {
        super(props);
        this.state = {//初始化组件状态
            arr: [],
            goods: [],
            i: 0
        }
    }
    componentDidMount() {//发请求在这个生命周期函数中进行
        category_list().then((res) => {
            // setState更新组件状态，不更新相当于修改值，不会使页面更新
            this.setState({
                arr: res.data.list
            }, () => {
                console.log(this.state.arr)
            })
        })
        category_subcate({ id: 225510 }).then((res) => {
            console.log(res.data)
            if (res.data.subcate) {
                this.setState({
                    goods: res.data.subcate.subcategory
                })
            }

        })
    }
    handClick(index) {
        //通过获取点击的index值，进行判断点击的是谁，从而获取响应数据进行页面渲染
        category_subcate({ id: this.state.arr[index].id }).then((res) => {
            this.setState({//setState是一个方法，用()而不是=
                goods: res.data.subcate.subcategory
            })
            console.log(res.data.subcate.subcategory)
        })
        this.setState({
            i: index
        })
    }
    render() {
        return (
            <div className='app'>
                <div className="box">
                    {
                        this.state.arr.map((item, index) => {
                            return (
                                // <div key={index} className={`left ${this.state.i == index ? 'active' : ''}`} onClick={() => this.handClick(index)}>
                                <div key={index} className={'left ' + (this.state.i == index ? 'active' : '')} onClick={() => this.handClick(index)}>
                                    <span> {item.name}</span>
                                </div>
                            )
                        })
                    }
                </div>

                <div className="right">
                    {
                        // 获取二级菜单的数组进行map循环
                        this.state.goods.map((item, index) => {
                            return (
                                <div className="good" key={index}>
                                    <p className='title2'>{item.name}</p>
                                    {/* // 渲染三级菜单 */}
                                    <div className="list">
                                        {
                                            // 通过二级菜单中的三级菜单进行map循环，渲染页面
                                            item.subNavs.map((item, index) => {
                                                return (
                                                    <div className="mingood" key={index} onClick={() => this.clickid(item.id)}>
                                                        <img src={item.pic} alt="" />
                                                        <span>{item.name}</span>
                                                    </div>
                                                )
                                            })
                                        }

                                    </div>
                                </div>
                            )
                        })
                    }

                </div>
            </div>
        );
    }
    clickid(id) {
        console.log(id)
        this.props.history.push({ pathname: '/index/all', state: { newid: id } })
    }
}

export default withRouter(aside);